<template>
<div id="app01">
    <h2>程序员之路</h2>
    <div>
        <div class="title">
            <h3>程序之歌</h3>
            <!--绑定一个事件-->
            <span class="btn" @click="btn">
                {{ isshow ? "收起" : "展开" }}
            </span>
        </div>
        <div class="content" v-show="isshow">
            <p>少时狂把编程想，</p>
            <p>无畏赴身IT行，</p>
            <p>纵使荣华未可近，</p>
            <p>我自coding又何妨！</p>
        </div>
    </div>
</div>

</template>

<script>

    export default {
        data() {
            return {
                isshow:true
            }
        },
        methods: {
            btn() {
                //点击时 把值改成false
                this.isshow = !this.isshow;
            }
        },
    }

</script>
<style lang="less">
    body{
        background: #0abbec;
        #app01{
            width: 400px;
            margin: 20px auto;
            background-color: rgb(12, 239, 201);
            border-radius: 5px;
            border: 2px solid brown;
            box-shadow: 3px 3px 3px rgba(0, 0, 0, .5);
            padding: 1em 2em 2em;
            h3{
                text-align: center;
            }
            .title{
                display: flex;
                justify-content: space-between; //两端对齐
                align-items: center; //垂直居中

            }
            .content{
                border: 1px solid rgb(255, 107, 107);
                padding-left: 9em;
                font-size: 16px;
                font-weight: 700;
                font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
            }
            .btn{
                color: rgb(255, 107, 107);
                font-size: 16px;
                font-weight: 700;
                cursor: pointer;
            }
        }
    }


</style>